<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>050_请求方式</title>
</head>
<body>
    <!-- npm install json-server -g
     json-server --watch db.json

     安装插件Preview on Web Server
     -->
     <button id="myget">get</button>
     <button id="mypost">post</button>
     <button id="myput">put</button>
     <button id="mydelete">delete</button>
     <button id="mypatch">patch</button>
    <div id="result"></div>
     <script>
        document.getElementById("myget").onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "http://localhost:3000/users", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    document.getElementById("result").innerText = JSON.stringify(data);
                }
            };
            xhr.send();
        };
        document.getElementById("mypost").onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "http://localhost:3000/users", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 201) {
                    var data = JSON.parse(xhr.responseText);
                    document.getElementById("result").innerText = JSON.stringify(data);
                }
            };
            xhr.send(JSON.stringify({ name: "John Doe", age: 30 }));
            //xhr.send("name=Johne&age=888");
        };
        document.getElementById("myput").onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open("PUT", "http://localhost:3000/users/1", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    document.getElementById("result").innerText = JSON.stringify(data);
                }
            };
            xhr.send(JSON.stringify({ name: "Jane Doe", age: 230 }));
        };
        document.getElementById("mydelete").onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open("DELETE", "http://localhost:3000/users/1", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    document.getElementById("result").innerText = JSON.stringify(data);
                }
            };
            xhr.send();
        };
        document.getElementById("mypatch").onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open("PATCH", "http://localhost:3000/users/1", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    document.getElementById("result").innerText = JSON.stringify(data);
                }
            };
            xhr.send(JSON.stringify({ age: 26 }));
        };
     </script>
</body>
</html>